/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles/foundation' as foundation;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@use './ace-editor';
@use './pane';

.code-editor {
  @include styles.styles-reset;
  display: block;
  border-block: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
  border-inline: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
  border-start-start-radius: awsui.$border-radius-code-editor;
  border-start-end-radius: awsui.$border-radius-code-editor;
  border-end-start-radius: awsui.$border-radius-code-editor;
  border-end-end-radius: awsui.$border-radius-code-editor;
  inline-size: 100%;
}

.editor {
  position: absolute;
  inset: 0;

  &:focus {
    @include styles.focus-highlight(3px);
    // Required to avoid SASS mixed declarations warning (https://sass-lang.com/d/mixed-decls)
    // stylelint-disable-next-line no-duplicate-selectors
    & {
      position: absolute;
      overflow: visible;
    }
  }
}

.editor-refresh {
  border-start-start-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
  border-start-end-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
}

.status-bar {
  container-type: inline-size;
  display: flex;
  vertical-align: middle;
  border-block-start: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
  background-color: awsui.$color-background-code-editor-status-bar;
  @include styles.text-wrapping;

  &-with-hidden-pane {
    border-end-start-radius: awsui.$border-radius-code-editor;
    border-end-end-radius: awsui.$border-radius-code-editor;
  }

  &__left {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding-inline-start: awsui.$space-l;
    border-inline-end: awsui.$border-width-field solid awsui.$color-border-code-editor-default;
  }

  &__right {
    display: flex;
    align-items: center;
  }

  &__language-mode,
  &__cursor-position {
    display: inline-block;
    color: awsui.$color-text-body-default;
    padding-block: awsui.$space-scaled-xs;
    padding-inline: awsui.$space-s;
  }

  &__cog-button {
    padding-block: calc(#{awsui.$space-scaled-xxs} - 1px);
    padding-inline: calc(#{awsui.$space-xs} - 2px);
  }
}

.tab-list {
  align-items: center;
  display: inline-flex;
}

.tab-button {
  position: relative;
  display: inline-flex;
  gap: #{awsui.$space-xxs};
  padding-block: awsui.$space-scaled-xs;
  padding-inline: awsui.$space-s;
  line-height: inherit;
  color: awsui.$color-text-status-error;
  background: none;
  border-block: none;
  border-inline: none;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  z-index: 1;

  &:hover {
    color: awsui.$color-text-code-editor-tab-button-error;
    background: awsui.$color-text-status-error;
  }

  &::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: awsui.$border-active-width;
    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
    background: awsui.$color-text-status-error;
    opacity: 0;
  }

  &--refresh {
    padding-block-end: calc(#{awsui.$space-scaled-xs} + #{awsui.$border-active-width} - 2px);
  }

  &--warnings {
    color: awsui.$color-text-status-warning;

    &:hover {
      background: awsui.$color-text-status-warning;
    }

    &::after {
      background: awsui.$color-text-status-warning;
    }
  }

  &--active::after {
    opacity: 1;
  }

  &--refresh::after {
    @include styles.with-motion {
      transition: opacity awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-c;
    }
  }

  &--disabled {
    font-weight: normal;
    color: awsui.$color-text-code-editor-status-bar-disabled;
    cursor: default;

    &:hover {
      color: awsui.$color-text-code-editor-status-bar-disabled;
      background: transparent;
    }

    &::after {
      display: none;
    }
  }

  @include focus-visible.when-visible {
    @include styles.focus-highlight(awsui.$space-code-editor-status-focus-outline-gutter);
  }

  &--divider {
    display: inline-block;
    block-size: awsui.$line-height-body-m;
    inline-size: awsui.$border-code-editor-status-divider-width;
    background: awsui.$color-border-tabs-divider;
    vertical-align: middle;
  }

  &--errors {
    /* used in test-utils */
  }

  @supports (contain: inline-size) {
    /* stylelint-disable plugin/no-unsupported-browser-features */
    @container not (max-width: 500px) {
      > .count {
        display: none;
      }

      > .text {
        display: inline;
      }
    }

    @container (max-width: 500px) {
      > .count {
        display: inline;
      }

      > .text {
        display: none;
      }
    }
    /* stylelint-enable plugin/no-unsupported-browser-features */
  }

  @supports not (contain: inline-size) {
    > .count {
      display: none;
    }

    > .text {
      display: inline;
    }
  }
}

$default-height: 480px;
.loading-screen,
.error-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: $default-height;
  color: awsui.$color-text-body-secondary;
  background: awsui.$color-background-code-editor-loading;
  border-start-start-radius: awsui.$border-radius-code-editor;
  border-start-end-radius: awsui.$border-radius-code-editor;
  border-end-start-radius: awsui.$border-radius-code-editor;
  border-end-end-radius: awsui.$border-radius-code-editor;
}

.error-screen {
  color: awsui.$color-text-status-error;
}
